<template>
	<div class="city">
		<aside class="top">
			<span>定位/附近城市</span>
			<ol>
				<li>{{show}}</li>
			</ol>
		</aside>
		<aside>
			<span >热门城市 </span>
			<ul v-for="item in menus" :key="item.code">
				<li @click="toHome(item.name)" :class="{ 'default' : show==item.name}">{{item.name}}</li>
			</ul>
		</aside>
		<div class="zi">
			<article v-for="(item , index) in menu " :key="index">
				<h3>字母{{item.initial}}开头的城市</h3>
				<ul>
					<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{ 'default' : show==key.name}">{{key.name}}</li>
				</ul>
			</article>
			
		</div>
	</div>
</template>

<script>
	import {mapMutations , mapState} from 'vuex';
	export default{
		name:"City",
		data(){
			return{
				menus : [],
				menu:[],
				show:'广州',
			}
		},
		mounted(){
			if(localStorage.city){
				this.show = localStorage.city;
			}
		},
		methods:{
			toHome(cname){
				//当点击某个城市时，获取传递过来的城市名称
				this.show=this.cityName;
				//调用并传参被选中的城市名进行传递
				this.changeCity(cname);
				//返回首页
				this.$router.push('/')
			},
			//激活mutations的方法
			...mapMutations(['changeCity'])
		},
		created(){
			let that = this;
			this.axios.get('/api/city.json').then((res)=>{
				let data = res.data.data
				that.menus=data.hotCities;
				that.menu=data.city;
				console.log(menu)
			} ).catch( (error)=>{
			
			console.log(error)
		} )
		}
	}
</script>

<style scoped>
	.city{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.city aside{
		width: 95%;
		height: 5rem;
		margin: 0 auto;
	}
	.city aside ol{
		width: 100%;
	}
	.city aside span{
		line-height: 2rem;
	}
	
	
	.city .top aside{
		width: 95%;
		margin: 0 auto;
		margin-top: 0.5rem;
		font-size: 0.3rem;
	}
	.city .top aside i{
		font-size: 1rem;
	}
	.city .top aside li{
		border: none;
		margin-top: 0.5rem;
		color: #000000;
		border-radius: 0.5rem;
		width: 5rem;
		line-height: 2rem;
		text-align: center;
		background-color: #e6e6e6;
		
	}
	
	
	
	
	.city .default{
		background-color: #FF9134;
		color: white;
	}
	.city .zi .default{
		background-color: #FF9134;
		color: white;
	}
	.city  aside li{
		border: none;
		margin-top: 0.2rem;
		border-radius: 0.5rem;
		width: 5rem;
		line-height: 2rem;
		text-align: center;
		float: left;
		background-color: #e6e6e6;
		margin-left: 0.2rem;
	}
	.city .zi h3{
		line-height: 2rem;
		width: 95%;
		border-top: 0.01rem solid gray;
		
	}
	.city .zi article{
		margin-left: 1rem;
		width: 100%;
		margin-top: 1rem;
		float: left;
		
	}
	.City .zi ul{
		width: 100%;
	}
	.city .zi li{
		border: none;
		border-radius: 0.5rem;
		width: 5rem;
		line-height: 2rem;
		text-align: center;
		float: left;
		background-color: #e6e6e6;
		margin-left: 0.2rem;
		margin-top: 0.2rem;
		
	}
	
</style>
